<template>
  <div class="app-container flex">
    <div class="left-container">
      <!-- 问题未成年人 -->
      <div class="question-teenager">
        <ScreenTitle sortStr="01" title="当前在管重点关注人员类型统计" />
        <div class="question-teenager-content flex">
          <div class="question-item" v-for="item in questionList" :key="item.id">
            <div class="qtitle">{{ item.title }}</div>
            <div class="bottom flex">
              <div class="bitem">
                <div class="label">{{ item.title === '关爱小组平均活动次数' ? '数值(次/人)' : '数值(人)' }}</div>

                <div class="value">{{ item.numer }}</div>
              </div>
              <div class="sline" style="">
                <img src="../../../assets/imgs/sline.png"></img>
              </div>
              <div class="bitem">
                <div class="label">环比变化</div>
                <div class="value" :style="item.valueStyle">{{ item.changeValue }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 风险趋势分析 -->
      <div class="risk flex">
        <div class="risk-box left">
          <STitle sortStr="" title="02风险类型占比" />
          <div class="content">
            <PieChart />
          </div>
        </div>
        <div class="risk-box right">
          <STitle sortStr="03" title="风险趋势分析 " />
          <div class="content">
            <BarChart />
          </div>
        </div>
      </div>
      <!-- 不良行为分析 -->
      <div class="badBehaviors flex">
        <div class="bad-box left">
          <STitle sortStr="04" title="不良行为类型分析" />
          <div class="content">
            <div class="bad-item" v-for="(item, index) in badBehaviors" :key="item.id">
              <div class="top">
                <span class="bnum">NO.{{ index + 1 }}</span>
                <span class="bad-title">{{ item.title }}</span>
              </div>
              <div class="mid flex">
                <div class="progress"></div>
                <div class="ci">108次</div>
              </div>
            </div>
          </div>
        </div>
        <div class="bad-box right">
          <STitle sortStr="05" title="风险显著上升TOP3" />
          <div class="content">
            <Warining />
          </div>
        </div>
      </div>
      <!-- 不良行为实事预警 -->
      <div class="warning">
        <ScreenTitle sortStr="06" title="不良行为实时预警" />
        <div class="content flex">
          <div class="witem flex" >
            <div class="wimg"><img src="../../../assets/imgs/img1.png"></img></div>

            <div class="wcontent">
              <div class="witm flex">
                <div class="label">对象姓名:</div>
                <div class="value">马艳丽</div>
              </div>
               <div class="witm flex">
                <div class="label">风险等级:</div>
                <div class="value">48-中度风险</div>
              </div>
               <div class="witm flex">
                <div class="label">行为标记:</div>
                <div class="value">打架斗殴(B类)</div>
              </div>
               <div class="witm flex">
                <div class="label">上报日期:</div>
                <div class="value">2025/09/14</div>
              </div>
               <div class="witm flex">
                <div class="label">上报人员:</div>
                <div class="value">李明静</div>
              </div>
            </div>
          </div>
          <div class="witem flex" >
            <div class="wimg"><img src="../../../assets/imgs/img2.png"></img></div>

            <div class="wcontent">
              <div class="witm flex">
                <div class="label">对象姓名:</div>
                <div class="value">何习涛</div>
              </div>
               <div class="witm flex">
                <div class="label">风险等级:</div>
                <div class="value">48-中度风险</div>
              </div>
               <div class="witm flex">
                <div class="label">行为标记:</div>
                <div class="value">打架斗殴(B类)</div>
              </div>
               <div class="witm flex">
                <div class="label">上报日期:</div>
                <div class="value">2025/09/14</div>
              </div>
               <div class="witm flex">
                <div class="label">上报人员:</div>
                <div class="value">李明静</div>
              </div>
            </div>
          </div>
          <div class="witem flex" >
            <div class="wimg"><img src="../../../assets/imgs/img3.png"></img></div>

            <div class="wcontent">
              <div class="witm flex">
                <div class="label">对象姓名:</div>
                <div class="value">彭松波</div>
              </div>
               <div class="witm flex">
                <div class="label">风险等级:</div>
                <div class="value">48-中度风险</div>
              </div>
               <div class="witm flex">
                <div class="label">行为标记:</div>
                <div class="value">打架斗殴(B类)</div>
              </div>
               <div class="witm flex">
                <div class="label">上报日期:</div>
                <div class="value">2025/09/14</div>
              </div>
               <div class="witm flex">
                <div class="label">上报人员:</div>
                <div class="value">李明静</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-container">
       <!-- 问题未成年人 -->
      <div class="question-teenager">
        <ScreenTitle sortStr="07" title="核心指标" />
        <div class="question-teenager-content flex">
          <div class="question-item" v-for="item in questionList" :key="item.id">
            <div class="qtitle">{{ item.title }}</div>
            <div class="bottom flex">
              <div class="bitem">
                <div class="label">{{ item.title === '关爱小组平均活动次数' ? '数值(次/人)' : '数值(人)' }}</div>

                <div class="value">{{ item.numer }}</div>
              </div>
               <div class="sline" style="">
                <img src="../../../assets/imgs/sline.png"></img>
              </div>
              <div class="bitem">
                <div class="label">环比变化</div>
                <div class="value" :style="item.valueStyle">{{ item.changeValue }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
       <div class="risk flex">
        <div class="risk-box left">
          <STitle sortStr="08" title="关爱活动类型统计" />
          <div class="content">
            <PieChart08 />
          </div>
        </div>
        <div class="risk-box right">
          <STitle sortStr="09" title="对接回归人员类型分布 " />
          <div class="content">
            <PieChart09 />
          </div>
        </div>
      </div>
      <!-- 高风险行为迹象预警 -->
      <div class="heightRisk">
        <ScreenTitle sortStr="10" title="关爱行动实时看板" />
        <div class="content">
             <HeightRisk />
        </div>
     
      </div>
      <!-- 高风险行为实事预警 -->
      <div class="warning">
        <ScreenTitle sortStr="11" title="高风险成年人行为实时预警" />
        <div class="content flex">
          <div class="witem flex">
            <div class="wimg"><img src="../../../assets/imgs/img5.png"></img></div>

            <div class="wcontent">
              <div class="witm flex">
                <div class="label">对象姓名:</div>
                <div class="value">唐小龙</div>
              </div>
               <div class="witm flex">
                <div class="label">风险等级:</div>
                <div class="value">48-中度风险</div>
              </div>
               <div class="witm flex">
                <div class="label">行为标记:</div>
                <div class="value">打架斗殴(B类)</div>
              </div>
               <div class="witm flex">
                <div class="label">上报日期:</div>
                <div class="value">2025/09/14</div>
              </div>
               <div class="witm flex">
                <div class="label">上报人员:</div>
                <div class="value">李明静</div>
              </div>
            </div>
          </div>
          <div class="witem flex">
            <div class="wimg"><img src="../../../assets/imgs/img6.png"></img></div>

            <div class="wcontent">
              <div class="witm flex">
                <div class="label">对象姓名:</div>
                <div class="value">李昭</div>
              </div>
               <div class="witm flex">
                <div class="label">风险等级:</div>
                <div class="value">48-中度风险</div>
              </div>
               <div class="witm flex">
                <div class="label">行为标记:</div>
                <div class="value">打架斗殴(B类)</div>
              </div>
               <div class="witm flex">
                <div class="label">上报日期:</div>
                <div class="value">2025/09/14</div>
              </div>
               <div class="witm flex">
                <div class="label">上报人员:</div>
                <div class="value">李明静</div>
              </div>
            </div>
          </div>
          <div class="witem flex">
            <div class="wimg"><img src="../../../assets/imgs/img7.png"></img></div>

            <div class="wcontent">
              <div class="witm flex">
                <div class="label">对象姓名:</div>
                <div class="value">何均超</div>
              </div>
               <div class="witm flex">
                <div class="label">风险等级:</div>
                <div class="value">48-中度风险</div>
              </div>
               <div class="witm flex">
                <div class="label">行为标记:</div>
                <div class="value">打架斗殴(B类)</div>
              </div>
               <div class="witm flex">
                <div class="label">上报日期:</div>
                <div class="value">2025/09/14</div>
              </div>
               <div class="witm flex">
                <div class="label">上报人员:</div>
                <div class="value">李明静</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
import { getOneFlagTreeList } from '@/api/api'
import ScreenTitle from './screenTitle'
import PieChart from './pie-chart'
import PieChart08 from './pie-chart08'
import PieChart09 from './pie-chart09'

import STitle from './sTitle'
import BarChart from './bar-chart'
import Warining from './warning'
import HeightRisk from './heightRisk'

export default {
  name: 'bigScreen',
  components: { startEndTime, Warining,HeightRisk, ScreenTitle, STitle, PieChart,PieChart08,PieChart09, BarChart },

  data() {
    return {
      questionList: [
        {
          id: 1,
          title: '累计纳管总人数',
          valueStyle: {
            color: '#FFB400',
          },
          numer: 148,
          changeValue: '+5%',
        },
        {
          id: 2,
          title: '当前在管总人数',
          valueStyle: {
            color: '#00EC8A',
          },
          numer: 45,
          changeValue: '+5%',
        },
        {
          id: 3,
          title: '对接回归总人数',
          valueStyle: {
            color: '#00EC8A',
          },
          numer: 148,
          changeValue: '-15%',
        },
        {
          id: 4,
          title: '关爱活动总次数',
          valueStyle: {
            color: '#00EC8A',
          },
          numer: 68,
          changeValue: '-20%',
        },
        {
          id: 5,
          title: '预警总次勠',
          valueStyle: {
            color: '#00AEFF',
          },
          numer: 1.5,
          changeValue: '持平',
        },
      ],
      badBehaviors: [
        {
          title: '逃学/旷课 (A类)',
          id: 1,
        },
        {
          title: '吸烟/饮酒 (A类)',
          id: 2,
        },
        {
          title: '打架斗殴 (B类)',
          id: 3,
        },
        {
          title: '逃学/旷课 (A类)',
          id: 4,
        },
        {
          title: '夜不归宿 (A类)',
          id: 5,
        },
      ],
    }
  },
  mounted() {},

  methods: {},
}
</script>

<style scoped lang="less">
.app-container {
  gap:6px;
   .question-teenager {
      width: 9.4rem;
      height: 1.81rem;
      background: #0d469d;
      border: 1px solid #006fe0;
      padding-left: 0.03rem;

      .question-teenager-content {
        margin-top: 10px;
        gap: 6px;
        .question-item {
          width: 1.8rem;
          height: 1.2rem;
          background: #0e4ba8;
          border-radius: 4px;
          .qtitle {
            width: 1.68rem;
            height: 0.25rem;
            background: #1054bc;
            font-size: 14px;
            font-weight: 400;
            color: #fff;
            line-height: 0.25rem;
            text-align: center;
            margin: 0.08rem auto;
          }
          .bottom {
            .bitem {
              flex: 1;
              text-align: center;
              .label {
                color: #abd5ff;
                font-size: 14px;
                margin-bottom: 0.05rem;
              }
              .value {
                color: #00aeff;
                font-size: 24px;
                font-weight: 500;
              }
            }
            .sline{
              width: 0.01rem;height: 0.63rem;
              img{
                width: 100%;
                height: 100%;
              }

            }
          }
        }
      }
    }
    
    .risk {
      gap: 6px;
      margin-top: 10px;
      .risk-box {
        width: 4.65rem;
        height: 2.4rem;
        background: #0d469d;
        border: 1px solid #006fe0;
        padding-left: 0.03rem;
      }
      .left {
        flex: 1;

        .content {
          transform: translateY(-0.15rem);
        }
      }
      .right {
        flex: 1;
        .content {
          // width: 2.2rem;
          // height: 3.5rem;
          transform: translateY(-0.2rem);
        }
      }
    }
     .warning {
      margin-top: 0.1rem;
      position: relative;

      width: 9.4rem;
      height: 2.23rem;
      background: #0d469d;
      border: 1px solid #006fe0;
      padding-left: 0.03rem;
      .content {
        gap: 0.08rem;
       padding-left: 0.08rem;
       padding-top: 0.1rem;
        .witem {
          width: 3rem;
          height: 1.52rem;
          font-size: 0.14rem;
          color: #fff;
          background: #1258C2;
          line-height: 0.27rem;
        
          align-items: center;
          .wimg {
            width: 1.17rem;
            height: 1.52rem;
            margin-right: 0.1rem;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .wcontent{
            .witm{
              font-size: 14px;
              .label{
                color:#ABD5FF;
                margin-right: 0.03rem;
                

              }
              .value{

              }
            }
          }
        }
      }
    }
  .left-container {
   
    .badBehaviors {
      gap: 6px;
      margin-top: 10px;
      .bad-box {
        width: 4.65rem;
        height: 3rem;
        background: #0d469d;
        border: 1px solid #006fe0;
        padding-left: 0.03rem;
      }
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;

        .content {
          padding: 0.2rem 0.2rem;
          flex: 1;

          .bad-item {
            display: flex;
            flex-direction: column;
            height: 0.36rem;
            margin-bottom: 0.06rem;
            border-bottom: 0.02rem solid rgba(25, 112, 245, 0.2);
            .top {
              color: #b1e1ff;
              .bnum {
                font-size: 16px;
                margin-right: 0.08rem;
              }
              .bad-title {
                font-size: 14px;
              }
            }
            .mid {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: -0.1rem;
              .progress {
                width: 3rem;
                height: 0.04rem;
                background: rgba(25, 112, 245, 0.6);
              }
              .ci {
                color: #00dbf5;
                font-size: 16px;
                padding-bottom: 0.05rem;
              }
            }
            .line {
              //margin-top: -0.02rem;
              width: 4.4rem;
              height: 0.02rem;
              background: rgba(25, 112, 245, 0.6);
            }
          }
        }
      }
      .right {
        flex: 1;
        .content {
          transform: translateY(-0.5rem);
          margin-left: 0.3rem;
        }
      }
    }
   
  }
  .right-container{
    .heightRisk{
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      width: 9.4rem;
      height: 3rem;
      background: #0d469d;
      border: 1px solid #006fe0;
      padding-left: 0.03rem;
      .content{
        flex:1;
        padding-left: 0.3rem;
      }
    }
  }
}
</style>

<!-- <style lang="less" scoped>
.bg {
  width: 100%;
  height: 100%;
//  background: url('../../../assets/imgs/big-001.jpg') no-repeat;
  background-size: 100% 100%;
}
</style> -->
